<template>
  <transition name="showHeader">
    <div class="header-animat">
      <!-- logo -->
      <div class="logo">清洁取暖综合管理平台</div>
      <!-- top menu -->
      <div>
        <ul class="menu">
          <li
            v-for="item in menuData"
            :key="item.key"
            @click="handleClick(item.key)"
            :class="{ 'current-menu': item.checked }"
          >
            <router-link :to="item.link">{{ item.val }}</router-link>
          </li>
        </ul>
      </div>
      <!-- date and weather -->
      <div class="sub-fun">
        <span>1月6日</span>
        <span>星期一</span>
        <span><i class="weather"></i>-5~4℃</span>
      </div>
      <!-- user and setting -->
      <div class="user-setting">
        <!-- <a-icon type="user" />
        <a-icon type="setting" /> -->
        <user-menu class="header-index-right"></user-menu>
      </div>
    </div>
  </transition>
</template>

<script>
import UserMenu from '../tools/UserMenu'
const menuData = [
  {
    key: 'xmtz',
    val: '项目台账',
    checked: true,
    link: '/projectStandingBook'
  },
  {
    key: 'gcgl',
    val: '工程管理',
    checked: false,
    link: '/projectManagement'
  },
  {
    key: 'gysgl',
    val: '供应商管理',
    checked: false,
    link: '/supplierManagement'
  },
  {
    key: 'yhgl',
    val: '用户管理',
    checked: false,
    link: '/userManagement'
  },
  {
    key: 'cxgl',
    val: '成效管理',
    checked: false,
    link: '/effectManagement'
  },
  {
    key: 'yxgl',
    val: '运行管理',
    checked: false,
    link: '/runningManagement'
  },
  {
    key: 'kfgl',
    val: '客服管理',
    checked: false,
    link: '/serviceManagement'
  }
]
export default {
  name: 'GlobalHeader',
  components: {
    UserMenu
  },
  data () {
    return {
      menuData,
      currentMenu: ''
    }
  },
  mounted () {
    if (location.hash.startsWith('#/projectStandingBook')) {
      localStorage.setItem('nav', 'xmtz')
    }
    this.currentMenu = localStorage.getItem('nav')
    this.menuData.forEach(ele => {
      ele.checked = false
      if (ele.key === this.currentMenu) {
        ele.checked = true
      }
    })
  },
  methods: {
    handleClick (key) {
      console.log(key)
      localStorage.setItem('nav', key)
      this.menuData.forEach(ele => {
        ele.checked = false
        if (ele.key === key) {
          ele.checked = true
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.header-animat {
  overflow: hidden;
  border-bottom: 1px solid rgb(5, 21, 69);
  background: rgb(1, 6, 49);
  & > div {
    float: left;
  }
  .logo {
    padding: 16px 100px 16px 56px;
    font-size: 30px;
    line-height: 36px;
    color: #fff;
    background: rgb(20, 72, 211);
    background-image: url('~@/assets/images/logo.png');
    background-repeat: no-repeat;
    background-position: 16px 16px;
  }
  .menu {
    border-bottom: 0 solid #000;
    margin: 0;
    padding: 0;
    margin-left: -50px;
    list-style: none;
    z-index: 2;
    li {
      float: left;
      color: #fff;
      border-bottom: 0 solid #000;
      transform: skewX(-30deg);
      a {
        display: block;
        padding: 16px;
        line-height: 36px;
        transform: skewX(30deg);
        color: #fff;
        text-decoration: none;
      }
      &:nth-child(1) {
        background: rgb(18, 66, 200);
      }
      &:nth-child(2) {
        background: rgb(16, 54, 160);
      }
      &:nth-child(3) {
        background: rgb(14, 47, 142);
      }
      &:nth-child(4) {
        background: rgb(12, 42, 122);
      }
      &:nth-child(5) {
        background: rgb(11, 37, 107);
      }
      &:nth-child(6) {
        background: rgb(10, 33, 96);
      }
      &:nth-child(7) {
        background: rgb(9, 30, 88);
      }
      &.current-menu {
        background-image: linear-gradient(rgba(25, 181, 190, 0), rgba(25, 181, 190, 1));
      }
    }
  }
  .sub-fun {
    margin-left: 50px;
    padding: 16px 0;
    span {
      display: inline-block;
      color: #fff;
      margin-right: 8px;
      line-height: 36px;
    }
    .weather {
      display: inline-block;
      width: 47px;
      height: 36px;
      vertical-align: middle;
      margin-right: 8px;
      background-image: url('~@/assets/images/weather.png');
    }
  }
  .user-setting {
    color: #fff;
    float: right;
    padding: 16px;
    line-height: 36px;
    .anticon {
      font-size: 16px;
      margin-left: 16px;
    }
  }
}
</style>
